<template>
    <div class="block">
        <el-avatar shape="square" :size="220" :src="userInfo.headimgurl"/>
    </div>
    
    <div class="table">
        <el-descriptions title="我的中心" :column="2" border extra="">
            <template #extra>
                <el-button type="primary">操作</el-button>
            </template>
            <el-descriptions-item
                label="unid"
                label-align="center"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                >
                {{userInfo.unid}}
            </el-descriptions-item>
            <el-descriptions-item label="账号" label-align="center" align="center">
                {{userInfo.username}}
            </el-descriptions-item>
            <el-descriptions-item label="vip等级" label-align="center" align="center">
                {{userInfo.vipLevel}}
            </el-descriptions-item >
            <el-descriptions-item label="vip到期时间" label-align="center" align="center">
                <el-tag size="small" class="vipDatetime">{{userInfo.vipExpires}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="昵称" label-align="center" align="center">
                <el-tag size="small" class="nickname">{{userInfo.nickname}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="手机号" label-align="center" align="center">
                {{userInfo.phone}}
            </el-descriptions-item >
            <el-descriptions-item label="角色名称" label-align="center" align="center">
                {{userInfo.roleName}}
            </el-descriptions-item >
            <el-descriptions-item label="性别" label-align="center" align="center">
                <el-tag size="small" class="sex">{{userInfo.sex}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="省份" label-align="center" align="center">
                {{userInfo.province}}
            </el-descriptions-item >
            <el-descriptions-item label="城市" label-align="center" align="center">
                {{userInfo.city}}
            </el-descriptions-item >
        </el-descriptions>
    </div>
</template>



<script setup>
// 引入用户store
import {useUser} from "@/store/users.js"
import {storeToRefs} from "pinia"
// 使用用户store
let userStore = useUser()
// 解构userInfo
let {userInfo} = storeToRefs(userStore)
// console.log(userInfo)




</script>



<script>
export default{
    meta:{
        title: 'wdzx', 
        name: '我的中心',
        routeName:"mine",
        icon:'#icon-wode'
    }
}


</script>


<style lang="less" scoped>
.block{
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    .el-avatar>img {
        display: block;
        height: 100%;
    }
}

.el-descriptions{
    :deep(.el-button){
        height: 40px;
        font-size: 16px;
    }
    :deep(.el-descriptions__title){
      font-size: 18px !important;
    }
    :deep(.el-descriptions__cell){
        height: 60px;
        font-size: 16px !important;

        .vipDatetime{
            background-color: #F56C6C !important;
            color: #fff;
            padding: 0 10px;
            height: 32px;
            font-size: 12px;
        }

        .nickname{
            background-color: #67C23A;
            color: #fff;
            font-size: 12px;
            padding: 0 10px;
            height: 32px;
            
        }

        .sex{
            padding: 0 10px;
            height: 24px;
        }
    }
}



</style>